<template>
  <!--   数据切换按钮   -->
  <div :class="isChecked ? 'top-btn-checked' : 'top-btn'" v-bind:color="isChecked ? checkedColor : noCheckedColor">
    {{btnText}}
  </div>
</template>

<script>
  export default {
    name: "top-button",
    props: {
      btnText: {
        type: String,
        default: '按钮',
        require: true
      },
      isChecked: {
        type: Boolean,
        default: true,
        require: true
      }
    },
    data() {
      return {
        checkedColor: 'linear-gradient(to right, #3CB4FF, #2D8DFB)',
        noCheckedColor: '',
      };
    }
  }
</script>

<style scoped>
  .top-btn {
    display: inline-block;
    width: 59px;
    height: 18px;
    text-align: center;
    vertical-align: middle;
    font-size: 9px;
    line-height: 18px;
    border: 0.5px #F0F0F0 solid;
    border-radius: 18px;
    background-color: inherit;
    color: #F0F0F0;
    margin: 0 20px 10px 0;
  }

  .top-btn-checked {
    display: inline-block;
    width: 80.5px;
    height: 43.5px;
    text-align: center;
    vertical-align: middle;
    font-size: 9px;
    line-height: 34px;
    background-color: inherit;
    color: #F0F0F0;
    background: url("../images/top-btn.png") no-repeat;
    background-size: 100% 100%;
    margin: 0 10px 0 -10px;
  }


</style>